<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../js/layui/css/layui.css" />
<script type="text/javascript" src="../js/layui/layui.js"></script>
</head>
<body>
	<div id="div_update" style="display: none;">
		<form id="update_form" lay-filter="form_filter" class="layui-form"
			onsubmit="return false">
			<input id="id" type="hidden" name="id" />
			<div class="layui-form-item">
				<label for="cname" class="layui-form-label"> <span
					class="x-red">*</span>留言回复
				</label>
				<div class="layui-input-inline">
					<input type="text" id="answer" name="answer" required=""
						lay-verify="required" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label for="cname" class="layui-form-label"> <span
					class="x-red">*</span>回复时间
				</label>
				<div class="layui-input-inline">
					<input type="text" id="answerTime" name="answerTime" required=""
						lay-verify="required" autocomplete="off" class="layui-input">
				</div>
			</div>


		<!-- 
		
		<div class="layui-form-item">
				<label class="layui-form-label">留言状态</label>
				<div class="layui-input-inline">
					<select id="status" name="status" lay-filter="aihao">
			
						<option value="已回复">已回复</option>
					</select>
				</div>
			</div> 
		 -->	


			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="submit" class="layui-btn" id="tiJiaoId" lay-submit=""
						lay-filter="xiuGai">立即提交</button>
				</div>
			</div>

		</form>
	</div>
	<table id="demo" lay-filter="test"></table>
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">回复</a>
	</script>
	<script>
		var table, form, layer, $, laydate;
		layui.use([ 'table', 'form', 'layer', 'laydate' ], function() {
			table = layui.table;
			form = layui.form;
			layer = layui.layer;
			$ = layui.$;
			laydate = layui.laydate;
			laydate.render({
				elem : '#answerTime' //指定元素
				,
				type : 'datetime'
			});
			//第一个实例
			table.render({
				elem : '#demo',
				url : '../getMessages' //数据接口
				,
				id : 'mseeageTabel',
				limit : 3,
				page : true //开启分页
				,
				cols : [ [ //表头
				{
					field : 'id',
					title : 'ID',
					sort : true,
					fixed : 'left'
				}, {
					field : 'lName',
					title : '用户名'
				}, {
					field : 'ask',
					title : '留言内容'
				}, {
					field : 'askTime',
					title : '留言时间',
					sort : true
				}, {
					field : 'contactWay',
					title : '手机号码'
				}, {
					field : 'answer',
					title : '留言回复'
				}, {
					field : 'answerTime',
					title : '回复时间',
					sort : true
				}, {
					field : 'status',
					title : '回复状态'
				}, {
					fixed : 'right',
					width : 150,
					align : 'center',
					toolbar : '#barDemo'
				}

				] ]
			});
			table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

				if (layEvent === 'edit') { //修改  
					$("#update_form")[0].reset();
					$("#tiJiaoId").show()
					form.val("form_filter", data)
					layer.open({
						type : 1,
						content : $("#div_update"),
						area : [ '450px', '250px' ]
					})
					return false;
				}

			});

			form.on('submit(xiuGai)', function() {
				$.post('../updateMessages', $("#update_form").serialize(),
						function(res) {
							layer.msg(res.msg);
							if (res.code == "0") {
								layer.closeAll();
								table.reload("mseeageTabel");
							}
						}, "json");
				return false;

			});
		});
	</script>
</body>
</html>